<template>
  <div class="cinema-seat">
    <div class="page-header canary-theme">
      <div class="page-header-left">
        <div @click="$router.go(-1)" class="page-header-back"></div>
      </div>
      <div class="page-header-title line-ellipsis" v-if="cinemaInfo">
        {{cinemaInfo.nm}}
      </div>
      <div class="page-header-right page-header-button">
        <div class="nav-btn">
          <img src="../assets/images/nav-button.png" alt="" class="nav-icon" />
        </div>
      </div>
    </div>
    <!-- 座位 -->
    <div class="content" v-if="!isSeats">
        <div class="outer">
            <div class="top" v-if="currentPlay">{{currentPlay.th}}</div>
            <div class="seatRegion" v-if="seatlist">
                <div class="seatRow" v-for="(item,index) in seatlist" :key="index" ref="img">
                    <img v-for="(s,i) in item.seats" :key="i" :src="s.seatStatus==0?imageUrl:allowUrl" alt="" class="my-seat" @click="selectSeat(s.rowId,s.columnId,i,s.seatNo)">
                </div>
            </div>
            <div class="graphContainer" v-if="seatTips">
                <div class="graphItem" v-for="(item,index) in seatTips" :key="index">
                    <div class="graphLoverIcon" :style="{'background-image':'url('+item.legendIcon+')'}"></div>
                    <span>{{item.legendName}}</span>
                </div>
            </div>
        </div>
    </div>
     <div class="seats-info" v-if="!isSeats">
                <div class="movie-info" v-if="currentfilm">
                    <div class="movie-name">{{currentfilm.nm}}</div>
                </div>
                <div class="show-info" v-if="currentPlay">
                    <!-- <span>今天</span> -->
                    <span>{{currentTime | navTime}}</span>
                    <span>{{currentPlay.tm}}-{{currentPlay.tm | endTime}}</span>
                    <span>{{currentPlay.lang}} {{currentPlay.tp}}</span>
                </div>
                <div class="selectedSeat" v-if="Selectedlist.length!=0">
                    <div class="border1px"></div>
                    <ul class="selectedList">
                        <li class="selectedItem" v-for="(item,index) in Selectedlist" :key="index" @click="del(index)">
                            <div class="seatDesc">
                                {{item.row}}排{{item.col}}座
                            </div>
                            <div>
                                <span>¥{{item.price}}</span>
                            </div>
                            <div class="cancelBtn"></div>
                        </li>
                    </ul>
                </div>
    </div>
    <div class="submitBlock" v-if="!isSeats">
        <div class="submitBtn">
            <div class="submitDesc" v-if="Selectedlist.length!=0" @click="showPayV">
                ¥{{sum}}  确认选座
            </div>
            <div class="disableText" v-if="Selectedlist.length==0">请先选座</div>
        </div>
    </div>
    <pay-view v-if="showPay" @back="back" :cinema-info="cinemaInfo" :currentfilm="currentfilm" :playlist="playlist" :selectedlist="Selectedlist" :current-play="currentPlay"></pay-view>
    <div class="load" v-if="isSeats">
        <van-loading type="spinner" size="18px" color="#fff">正在加载座位...</van-loading>
    </div>
  </div>
</template>

<script>
import {getCinemasDetail,getCinemaShows,getCinemaSeat} from '../api/cinema.js'
import PayView from '../components/PayView.vue'
export default {
    data() {
        return {
            cinemaInfo:null,
            movieslist:null,
            currentfilm:null,
            seatlist:null,//座位
            allowUrl:null,//可选座位
            imageUrl:null,//不可选座位
            selecedUrl:null,//选择座位
            seatTips:null,//选座提示
            Selectedlist:[],//已选取
            flag:false,
            seatIndex:null,
            rowIndex:null,
            date:null,//当前时间
            currentTime:null,
            playlist:null,//当前选座电影列表
            currentPlay:null,//当前播放
            seqNo:null,//场次号
            showPay:false,//支付页面
            isSeats:true,
            row:null,
            col:null,
        }
    },
    methods: {
        //影院详情数据
       getCinemaDetailFun(id){
         getCinemasDetail({cinemaId:id}).then(data=>{
            this.cinemaInfo=data.data
         })
       },
       //获取影院正在上映电影
       getCinemaShowsFun(id,ci){
        getCinemaShows({cinemaId:id,ci,channelId:4}).then(data=>{
            // console.log(data);
            this.movieslist=data.data.movies
            let index = this.movieslist.findIndex(item=>item.id==this.$route.query.movieId)
            this.currentfilm = this.movieslist[index]
            let playIndex =this.currentfilm.shows.findIndex(item=>item.showDate==this.$route.query.time)
            this.playlist=this.currentfilm.shows[playIndex];//获取当前选座电影列表
            let currenPlayIndex = this.playlist.plist.findIndex(item=>item.seqNo==this.seqNo)
            this.currentPlay = this.playlist.plist[currenPlayIndex]//根据场次号获取当前播放电影
            // console.log(this.currentfilm);
            // console.log(this.playlist);
            // console.log(this.currentPlay);
        })
       },
       //获取座位
       getSeatFun(){
            getCinemaSeat().then(data=>{
                // console.log(data);
                if (data) {
                 setTimeout(()=>{
                     this.isSeats=false
                 },2000)
                }
                this.seatlist=data.data.seat.regions[0].rows
                this.imageUrl = data.data.seat.image.forbidImages[0]
                this.selecedUrl = data.data.seat.image.selectedImages[0]
                this.allowUrl = data.data.seat.image.seatLegends[0].legendIcon
                this.seatTips = data.data.seat.image.seatLegends
                // console.log(this.seatlist);
                // console.log(this.seatTips[1]);
            })
       },
       //选座
       selectSeat(row,col,index,no){

        // console.log(this.$refs.img[row-1].children[index].src);
        let allowImg = this.$refs.img[row-1].children[index].src==this.allowUrl
        let selectedImg = this.$refs.img[row-1].children[index].src==this.selecedUrl
        let isselectImg = this.$refs.img[row-1].children[index].src==this.seatTips[1].legendIcon

        if (no!='') {
        if (allowImg) {
            if (this.Selectedlist.length<4) {
                this.$refs.img[row-1].children[index].src=this.selecedUrl
                this.Selectedlist.push({
                id:index,
                row:row,
                col:col,
                price:Number(Math.ceil(this.currentPlay.baseSellPrice)),
            })
            }else{
                this.$toast("一次最多购买4张票");
            }
        }else if(selectedImg){
            if (this.Selectedlist.length!=0) {
                let num = this.Selectedlist.findIndex(item=>item.id==index)
                this.Selectedlist.splice(num,1)
            }
            this.$refs.img[row-1].children[index].src=this.allowUrl
        }else if(isselectImg){
          this.$toast("此座位已被选");
        }
        }else{
            this.$toast("此座位不可售");
        }

       },
       //取消座位
       del(index){
          this.$refs.img[this.Selectedlist[index].row-1].children[this.Selectedlist[index].id].src=this.allowUrl
          this.Selectedlist.splice(index,1)
       },
       //显示支付页面
       showPayV(){
        this.showPay=true
       },
       //关闭支付页面
       back(value){
        this.showPay=value
       }
    },
    computed:{
        sum(){
            return this.Selectedlist.reduce((total,item)=>{
                return total +=item.price
            },0)
        }
    },
    mounted() {
      this.$nextTick(()=>{
        let temp = JSON.parse(window.localStorage.getItem("orderlist"))
        setTimeout(() => {
          if (temp) {
            temp.forEach(item=>{
              if (!item.isfinish) {
                item.seat.forEach(k=>{
                  if (this.$refs.img) {
                    this.$refs.img[Number(k.row)-1].children[k.id].src=this.seatTips[1].legendIcon
                  }
                })                
              }else{
                item.seat.forEach(k=>{
                  if (this.$refs.img) {
                    this.$refs.img[Number(k.row)-1].children[k.id].src=this.allowUrl
                  }
                })       
              }
            })
          }
        }, 2500);
      });
    },
    created() {
       let cinemaId = this.$route.query.cinemaId
       let cityId = this.$route.query.ci
       this.seqNo = this.$route.query.seqNo
       this.currentTime=this.$route.query.time

       this.getCinemaDetailFun(cinemaId)
       this.getCinemaShowsFun(cinemaId,cityId)
       this.getSeatFun()
    },
    filters:{
      endTime(value){
        if (value) {
          let starttime = value.split(":")
          let endTime = `${Number(starttime[0])+2}:${starttime[1]}`
          if (Number(starttime[0])+2==24) {
            let endTime = `${Number(0)+'0'}:${starttime[1]}`
            return endTime
          }
          if (Number(starttime[0])+2>24) {
            let endTime = `${'0'+(Number(starttime[0])+2)-24}:${starttime[1]}`
            return endTime
          }
          return endTime
        }
      },
      navTime(value){
        let dates = value;
        let datesar = dates.split("-");
        let date = new Date();
        let datewl = new Date(datesar[0], String(datesar[1] - 1), datesar[2]);
        let datewls = datewl.getDay();
      
        let datesl = date.getDate();
        if (datesar[2] == datesl) {
          return "今天 " + datesar[1] + "月" + datesar[2] + "日";
        } else if (datesar[2] == Number(datesl) + 1) {
          return "明天 " + datesar[1] + "月" + datesar[2] + "日";
        } else if (datesar[2] == Number(datesl) + 2) {
          return "后天 " + datesar[1] + "月" + datesar[2] + "日";
        } else if (datewls == 1) {
          return "星期一 " + datesar[1] + "月" + datesar[2] + "日";
        } else if (datewls == 2) {
          return "星期二 " + datesar[1] + "月" + datesar[2] + "日";
        } else if (datewls == 3) {
          return "星期三 " + datesar[1] + "月" + datesar[2] + "日";
        } else if (datewls == 4) {
          return "星期四 " + datesar[1] + "月" + datesar[2] + "日";
        } else if (datewls == 5) {
          return "星期五 " + datesar[1] + "月" + datesar[2] + "日";
        } else if (datewls == 6) {
          return "星期六 " + datesar[1] + "月" + datesar[2] + "日";
        } else if (datewls == 0) {
          return "星期日 " + datesar[1] + "月" + datesar[2] + "日";
        }
      }
    },
    components:{
        PayView,
    }
};
</script>

<style lang="less" scoped>
.cinema-seat {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
  .page-header {
    display: flex;
    height: 50px;
    text-align: center;
    color: #fff;
    background: #e54848;

    .page-header-left {
      width: 50px;
      height: 100%;
      line-height: 50px;

      .page-header-back {
        display: inline-flex;
        position: relative;
        width: 16px;
        height: 16px;
        vertical-align: middle;

        &::before {
          content: "";
          position: absolute;
          top: 0;
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          border-bottom: 2px solid #fff;
          border-left: 2px solid #fff;
          transform: rotate(45deg);
        }
      }
    }
    .page-header-title {
      flex: 1;
      line-height: 50px;
      font-size: 18px;
      font-weight: 400;
    }
    .page-header-right {
      height: 100%;
      line-height: 50px;
    }
    .page-header-button {
      display: flex;
      position: relative;
      width: 100px;
      -webkit-box-align: center;
      align-items: center;

      .nav-btn {
        -webkit-box-flex: 1;
        flex: 1;
        text-align: right;
        margin-right: 6px;

        .nav-icon {
          width: 17px;
          height: 16px;
          display: inline-block;
        }
      }
    }
  }
  .content{
    padding: 25px;
    text-align: center;

    .outer{
        .top{
            color: #999;
        }
        .seatRegion{
            margin-top: 10px;
            margin-bottom: 25px;
            .seatRow{
                // height: 27px;
                .my-seat{
                    display: inline-block;
                    width: 19px;
                    height: 19px;
                    margin: 0 6px 8px 0;
                    background-size: 100% 100%;
                }
                .active{
                    width: 30px;
                    height: 30px;
                    background-image: url("../assets/images/80c67d1a9af433466453c69d29f32888742.png");
                    background-repeat: no-repeat;
                    background-size: cover;
                }
            }
        }
        .graphContainer{
            display: flex;
            -webkit-box-pack: center;
            justify-content: center;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #999;
            background-color: #f6f6f6;

            .graphItem{
                display: flex;
                -webkit-box-align: center;
                align-items: center;
                -webkit-box-flex: 0;
                flex: none;
                padding: 0 7px;
                height: 30px;

                .graphLoverIcon{
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    margin-right: 5px;
                    background: no-repeat 50%;
                    background-size: contain;
                }
            }
        }
    }
  }
  .seats-info{
    height: 136px;
    overflow: hidden;
    margin: 0 10px;
    padding-bottom: 15px;
    border-radius: 12px;
    box-shadow: 0 1px 8px 0 rgb(0 0 0 / 3%);
    font-size: 13px;
    color: #333;
    background-color: #fff;

    .movie-info{
        position: relative;
        margin-top: 15px;
        padding: 0 15px;

        .movie-name{
            line-height: 21px;
            font-family: PingFangSC-Medium;
            font-size: 15px;
        }
    }
    .show-info{
        margin-top: 5px;
        padding: 0 15px;
        line-height: 18px;
        color: #666;

        &>span{
            vertical-align: middle;
            margin-left: 5px;
        }
        &>span:first-child{
            margin: 0;
        }
    }
        .selectedSeat{
            position: relative;
            font-size: 12px;

            .border1px{
                margin: 15px 15px 0;
                border-top: 1px solid #f6f6f6;
                transform: scaleY(.5);
            }
        .selectedList{
                overflow-x: auto;
                margin-top: 15px;
                white-space: nowrap;

         .selectedItem{
             position: relative;
             display: inline-block;
             box-sizing: border-box;
             min-width: 81px;
             height: 45px;
             line-height: 17px;
             margin-right: 10px;
             padding: 0 20px 0 10px;
             border-radius: 4px;
                 background: #f6f6f6;

                 &:first-child{
                     margin-left: 15px;
                 }

                 .seatDesc{
                     margin-top: 5px;
                 }
                 .cancelBtn{
                     position: absolute;
                     top: 50%;
                     right: 0;
                     width: 20px;
                     height: 20px;
                     margin-top: -10px;
                     background: url("../assets/images/叉叉.png") no-repeat 2px;
                     background-size: 8px 8px;
                 }
             }
             &::-webkit-scrollbar {
                display: none;
            }
         }
            }
  }
  .submitBlock{
    margin: 10px;
    padding-bottom: env(safe-area-inset-bottom);

    .submitBtn{
        display: flex;
        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
        width: 100%;
        height: 44px;
        border-radius: 50px;
        text-align: center;
        font-family: PingFangSC-Medium;
        font-size: 17px;
        color: #fff;
        background-image: linear-gradient(270deg,rgba(255,123,16,.98),rgba(255,154,15,.98));

        .submitDesc{
            line-height: 24px;
        }
        .disableText{
            opacity: .4;
            font-weight: 500;
        }
    }
  }
}
.load{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 140px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 14px;
    background-color: #000;
    opacity: 0.7;    
}
</style>